<template>
  <!-- 非网关节点 -->
  <div class="node-wrap"
    v-if="[NODE.START, NODE.APPROVE, NODE.COPY, NODE.TRANSACT, NODE.COMMAND, NODE.TASK, NODE.DECISION].includes(nodeConfig.type)">
    <div class="node-wrap-box" :class="{ 'start-node': nodeConfig.type == NODE.START }">
      <div class="title" :style="{ background: nodeBgColor }">
        <!-- 开始节点 -->
        <span v-if="nodeConfig.type == NODE.START">{{ nodeConfig.name }}</span>
        <!-- 任务、办理、抄送节点 -->
        <template v-else>
          <!-- <span class="iconfont-approval-admin">{{ nodeConfig.type == 1 ? "&#xe658" : "&#xe656" }}</span> -->
          <input v-if="isNodeNameEdit" type="text" class="editable-title-input" @blur="onNameInputBlur()"
            @focus="$event.currentTarget.select()" v-focus v-model="nodeConfig.name" :maxlength="16"
            :placeholder="nodeDefaultName" />
          <template v-else>
            <span class="editable-title">
              <span @click="onNameInputClick()">{{ nodeConfig.name }}</span>
            </span>
            <icon-close class="close" :size="14" @click="onNodeRemove" />
          </template>
        </template>
      </div>
      <div class="content" @click="onNodeCardClick">
        <!-- 发起人节点 -->
        <a-tooltip v-if="nodeConfig.type == NODE.START" :content="showNodeContent" mini
          content-class="node-content-tooltip">
          <span class="text">{{ nodeDefaultName }}：{{ showNodeContent }}</span>
        </a-tooltip>
        <!-- 审核人、抄送人、办理人节点 -->
        <template
          v-else-if="[NODE.APPROVE, NODE.COPY, NODE.TRANSACT, NODE.COMMAND, NODE.TASK, NODE.DECISION].includes(nodeConfig.type)">
          <span class="placeholder" v-if="!showNodeContent">请选择{{ nodeDefaultName }}</span>
          <a-tooltip v-else mini :content="showNodeContent" content-class="node-content-tooltip">
            <span class="text">{{ nodeDefaultName }}：{{ showNodeContent }} </span>
          </a-tooltip>
        </template>
        <div style="color: #a1a5ad"><icon-right /></div>
      </div>
    </div>
    <AddNode v-model:childNodeP="nodeConfig.childNode" />
  </div>
  <!--跳转节点-->
  <div class="node-wrap" v-if="nodeConfig.type == NODE.GOTO">
    <div class="node-wrap-box" :class="{ 'start-node': nodeConfig.type == NODE.START }">
      <div class="title" :style="{ background: nodeBgColor }">
        <!-- 开始节点 -->
        <span v-if="nodeConfig.type == NODE.START">{{ nodeConfig.name }}</span>
        <!-- 任务、办理、抄送节点 -->
        <template v-else>
          <!-- <span class="iconfont-approval-admin">{{ nodeConfig.type == 1 ? "&#xe658" : "&#xe656" }}</span> -->
          <input v-if="isNodeNameEdit" type="text" class="editable-title-input" @blur="onNameInputBlur()"
            @focus="$event.currentTarget.select()" v-focus v-model="nodeConfig.name" :maxlength="16"
            :placeholder="nodeDefaultName" />
          <template v-else>
            <span class="editable-title">
              <span @click="onNameInputClick()">{{ nodeConfig.name }}</span>
            </span>
            <icon-close class="close" :size="14" @click="onNodeRemove" />
          </template>
        </template>
      </div>
      <div class="content" @click="onNodeCardClick">
        <!-- 发起人节点 -->
        <a-tooltip v-if="nodeConfig.type == NODE.GOTO" :content="showNodeContent" mini
          content-class="node-content-tooltip">
          <span class="text">{{ nodeDefaultName }}：{{ showNodeContent }}</span>
        </a-tooltip>
        <div style="color: #a1a5ad"><icon-right /></div>
      </div>
    </div>
    <view style="height:50px;width:50px"></view>

  </div>
  <!-- 网关节点 -->
  <div class="branch-wrap"
    v-if="nodeConfig.type == NODE.EXCLUSIVE_GATEWANY || nodeConfig.type == NODE.PARALLEL_GATEWAY">
    <div class="branch-box-wrap">
      <div class="branch-box">
        <button class="add-branch" @click="onConditionAdd()"><icon-plus />添加条件</button>
        <!-- 网关分支节点 -->
        <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">

          <div class="condition-node">
            <div class="condition-node-box">
              <!-- 默认分支条件 -->
              <!-- <div class="auto-judge default-branch-node" v-if="isDefaultBranchNode(index)">
                <div class="title-wrapper">
                  <span class="editable-title">默认条件</span>
                  <span class="priority-title">优先级{{ item.priority }}</span>
                </div>

                <div class="content-wrapper">
                  <div class="content">未满足时其他条件时，将进入默认流程</div>
                </div>
              </div> -->
              <!-- 其他分支条件 -->
              <div class="auto-judge">
                <div class="title-wrapper">
                  <input v-if="nodeNameInputList[index]" type="text" class="editable-title-input"
                    @blur="onNameInputBlur(index)" @focus="$event.currentTarget.select()" :maxlength="16" v-focus
                    v-model="item.name" />
                  <template v-else>
                    <span class="editable-title" @click="onNameInputClick(index)"> {{ item.name }} </span>
                    <span class="priority-title">优先级{{ item.priority }}</span>
                    <a-link class="close" @click="onConditionRemove(index)">
                      <template #icon><icon-close /></template>
                    </a-link>
                  </template>
                </div>
                <div class="content-wrapper">
                  <div class="sort-left" v-if="index != 0" @click="branchSwitchIdx(index, -1)">
                    <icon-left />
                  </div>
                  <div class="content" @click="onConditionCardClick(item)">
                    <span v-if="$.isEmpty(item.conditionRule)" class="placeholder">请设置条件</span>
                    <!-- 卡片上显示分支条件 -->
                    <a-tooltip v-else mini :content="item.conditionRule" content-class="node-content-tooltip">
                      <span class="text">表达式 : {{ item.conditionRule }}</span>
                    </a-tooltip>
                  </div>
                  <div class="sort-right"
                    v-if="index != nodeConfig.conditionNodes.length - 1 && !isDefaultBranchNode(index + 1)"
                    @click="branchSwitchIdx(index)">
                    <icon-right />
                  </div>
                </div>
              </div>
              <!--如果是节点映射,则拒行-->
              <AddNode v-model:childNodeP="item.childNode" />
            </div>

          </div>
          <NodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
          <template v-if="index == 0">
            <div class="top-left-cover-line"></div>
            <div class="bottom-left-cover-line"></div>
          </template>
          <template v-if="index == nodeConfig.conditionNodes.length - 1">
            <div class="top-right-cover-line"></div>
            <div class="bottom-right-cover-line"></div>
          </template>
        </div>
      </div>
      <AddNode v-model:childNodeP="nodeConfig.childNode" />
    </div>
  </div>

  <!-- 分支汇合节点 -->
  <NodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
</template>

<script setup>
import useApp from "@/hooks";
const { $ } = useApp();
import { useFlowStore, useOrganStore } from "@/stores/index";
import { IconClose, IconLeft, IconPlus, IconRight } from "@arco-design/web-vue/es/icon";
import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import ArrayUtil from "./common/ArrayUtil";
import { NODE } from "./common/FlowConstant";
import { showExpNodeContent } from "./common/FormExp";
let _uid = getCurrentInstance().uid;

// 属性
let props = defineProps({
  nodeConfig: { type: Object, default: () => { } },
  flowPermission: { type: Object, default: () => { } },
});

let emits = defineEmits(["update:nodeConfig"]);
let { roles: allRoles, users: allUsers, getById } = useOrganStore();
let flowStore = useFlowStore();
let {
  flowDefine,
} = flowStore;
// 节点基本信息
let nodeSettings = reactive({
  [NODE.START]: { placeholder: "发起人", bgColor: "#a9b4cd" },
  [NODE.APPROVE]: { placeholder: "审批人", bgColor: "#ff943e" },
  [NODE.TASK]: { placeholder: "审批人", bgColor: "#ff943e" },
  [NODE.DECISION]: { placeholder: "决策任务", bgColor: "#ff943e" },
  [NODE.COPY]: { placeholder: "抄送人", bgColor: "#3296fa" },
  [NODE.TRANSACT]: { placeholder: "办理人", bgColor: "#926bd5" },
  [NODE.COMMAND]: { placeholder: "命令节点", bgColor: "#926bd5" },
  [NODE.GOTO]: { placeholder: "跳转节点", bgColor: "#926bd5" },
});
// nodeSettings[NODE.START] = { placeholder: "发起人", bgColor: "#a9b4cd" };
// nodeSettings[NODE.APPROVE] = { placeholder: "审批人", bgColor: "#ff943e" };
// nodeSettings[NODE.COPY] = { placeholder: "抄送人", bgColor: "#3296fa" };
// nodeSettings[NODE.TRANSACT] = { placeholder: "办理人", bgColor: "#926bd5" };
let nodeDefaultName = computed(() => nodeSettings[props.nodeConfig.type].placeholder);
let nodeBgColor = computed(() => nodeSettings[props.nodeConfig.type].bgColor);

// nodeType 0发起人 1审批 2抄送 3条件 4路由
// 节点卡片显示的内容
let showNodeContent = computed(() => {
  let nodeType = props.nodeConfig.type;
  if (nodeType == NODE.START) {
    let type = props.nodeConfig.assignees[0].assignType
    if (type == 'ALL') return "全员可提交";
    else return "条件限制提交"
  } else if (nodeType == NODE.TASK) {
    return "等待指派"
  } else if (nodeType == NODE.COMMAND) {
    if ($.isNotEmpty(props.nodeConfig.command)) {
      if ($.isNotEmpty(props.nodeConfig.runScript)){
        return "命令&脚本已配置"
      }
      return "命令已配置"
    }else{
      return "待配置"
    }
  }else if(nodeType == NODE.DECISION){
    if($.isNotEmpty(props.nodeConfig.nodeIds)){
      return "已配置"
    }else{
      return "待选择"
    }
 
  }
});

// 是否为默认分支节点
const isDefaultBranchNode = (idx) => {
  return props.nodeConfig.conditionNodes.length == idx + 1;
};

let nodeNameInputList = ref([]);
let isNodeNameEdit = ref(false);

// 节点名称点击事件
const onNameInputClick = (index) => {
  if (index || index === 0) {
    nodeNameInputList.value[index] = true;
  } else {
    isNodeNameEdit.value = true;
  }
};

// 节点名称离开事件
const onNameInputBlur = (index) => {
  if (index || index === 0) {
    nodeNameInputList.value[index] = false;
    props.nodeConfig.conditionNodes[index].name = props.nodeConfig.conditionNodes[index].name || "条件";
  } else {
    isNodeNameEdit.value = false;
    props.nodeConfig.name = props.nodeConfig.name || nodeDefaultName;
  }
};

// 删除节点
const onNodeRemove = () => {
  emits("update:nodeConfig", props.nodeConfig.childNode);
};

// 新增分支条件
const onConditionAdd = () => {
  let len = props.nodeConfig.conditionNodes.length + 1;
  props.nodeConfig.conditionNodes.push({
    name: "条件" + len,
    type: NODE.CONDITION,
    priority: len,
    conditionList: [],
    childNode: null,
  });
  emits("update:nodeConfig", props.nodeConfig);
};

// 删除分支条件
const onConditionRemove = (index) => {
  props.nodeConfig.conditionNodes.splice(index, 1);
  props.nodeConfig.conditionNodes.map((item, index) => {
    item.priority = index + 1;
    item.name = `条件${index + 1}`;
  });
  emits("update:nodeConfig", props.nodeConfig);
  if (props.nodeConfig.conditionNodes.length == 1) {
    if (props.nodeConfig.childNode) {
      if (props.nodeConfig.conditionNodes[0].childNode) {
        reconnectNode(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode);
      } else {
        props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode;
      }
    }
    emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
  }
};

// 删除分支后重新连接节点
const reconnectNode = (data, addData) => {
  if (!data.childNode) {
    data.childNode = addData;
  } else {
    reconnectNode(data.childNode, addData);
  }
};
// 条件节点点击
const onConditionCardClick = (item) => {
  var { type } = props.nodeConfig;
  $.emit(type + '-drawer-open', item)
}

// 节点卡片点击
const onNodeCardClick = (priority) => {
  var { type } = props.nodeConfig;
  console.log(props.nodeConfig)
  console.log(type)
  $.emit(type + '-drawer-open', props.nodeConfig)
};

// 分支条件交换位置
const branchSwitchIdx = (index, type = 1) => {
  //向左-1,向右1
  props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(index + type, 1, props.nodeConfig.conditionNodes[index])[0];
  props.nodeConfig.conditionNodes.map((item, index) => {
    item.priority = index + 1;
  });
  emits("update:nodeConfig", props.nodeConfig);
};

onMounted(() => {
  // if (props.nodeConfig.type == 1) {
  //   props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig);
  // } else if (props.nodeConfig.type == 2) {
  //   props.nodeConfig.error = !$func.copyerStr(props.nodeConfig);
  // } else if (props.nodeConfig.type == 4) {
  //   resetConditionNodesErr();
  // }
});
</script>

<style lang="less">
@import "nodes/node.less";
</style>
